<template>
    <div class="hbox hbox-auto-xs hbox-auto-sm" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
        <div class="col w-lg bg-light b-r bg-auto">
            <div class="wrapper-md dker b-b">
                <h3 class="m-n font-thin">Select files</h3>
            </div>
            <div class="wrapper-md">
                <!--<div ng-show="uploader.isHTML5" class="m-b-md">
                    <div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-over="" over-class="b-info" uploader="uploader">
                        Base drop zone
                    </div>

                    <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                        <div nv-file-over="" uploader="uploader" over-class="b-danger" class="b-a b-2x b-dashed wrapper-lg lter text-center">
                            Another drop zone with its own settings
                        </div>
                    </div>
                </div>-->

                <p>Multiple</p>
                <vue-file-upload :multiple="true" url='upload.do' v-bind:files.sync='files' v-bind:filters='filters' v-bind:events='cbEvents' v-bind:request-options='reqopts'></vue-file-upload>

                <p class="m-t-md">Single</p>
                <vue-file-upload url='upload.do' v-bind:icon="icon" v-bind:files.sync='files' v-bind:filters='filters' v-bind:events='cbEvents' v-bind:request-options='reqopts'></vue-file-upload>
            </div>
        </div>
        <div class="col">
            <div class="wrapper-md bg-light dk b-b">
                <span class="pull-right m-t-xs">Queue length: <b class="badge bg-info">{{ files.length }}</b></span>
                <h3 class="m-n font-thin">Upload queue</h3>
            </div>
            <div class="wrapper-md">
                <table class="table bg-white-only b-a">
                    <thead>
                    <tr>
                        <th width="50%">Name</th>
                        <th>Size</th>
                        <th>Progress</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in files">
                        <td><strong>{{ item.name }}</strong></td>
                        <td nowrap>{{ item.size/1024/1024}} MB</td>
                        <td>
                            <div class="progress progress-sm m-b-none m-t-xs">
                                <div class="progress-bar bg-info" role="progressbar" :style="{ 'width': item.progress + '%' }"></div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span v-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
                            <span v-show="item.isCancel" class="text-warning"><i class="glyphicon glyphicon-ban-circle"></i></span>
                            <span v-show="item.isError" class="text-danger"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td nowrap>
                            <button type="button" class="btn btn-default btn-xs" @click="uploadItem(item)" :disabled="item.isReady || item.isUploading || item.isSuccess">
                                Upload
                            </button>
                            <button type="button" class="btn btn-default btn-xs" @click="cancelUpload(item)" :disabled="!item.isUploading">
                                Cancel
                            </button>
                            <button type="button" class="btn btn-default btn-xs" @click="removeItem(item)">
                                Remove
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div>
                    <div>
                        <p>Queue progress:</p>
                        <div class="progress bg-light dker">
                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" :style="{ 'width': all.progress + '%' }"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-addon btn-success" @click="uploadAll()" :disabled="files.length == 0">
                        <i class="fa fa-arrow-circle-o-up"></i> Upload all
                    </button>
                    <button type="button" class="btn btn-addon btn-warning" @click="cancelAll()" :disabled="!all.isUploading">
                        <i class="fa fa-ban"></i> Cancel all
                    </button>
                    <button type="button" class="btn btn-addon btn-danger" @click="clearQueue()" :disabled="files.length == 0">
                        <i class="fa fa-trash-o"></i> Remove all
                    </button>
                    <p class="text-muted m-t-xl">Note: upload.php file included, files will be uploaded to "src/js/controllers/uploads".</p>
                </div>
            </div>
        </div>
    </div>
</template>
<style>

</style>
<script>

    import VueFileUpload from 'vue-file-upload';

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                files:[],
                all:{},
                icon:'glyphicon glyphicon-folder-open',
                //文件过滤器，只能上传图片,
                filters:[
                    {
                        name:"imageFilter",
                        fn(file){
                            var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
                        }
                    }
                ],
                //回调函数绑定
                cbEvents:{
                    onCompleteUpload (file,response,status,header){
                        console.log('onCompleteUpload');
                        console.log(file);
                    },
                    onProgressUpload (file,response,status,header){
                        console.log('onProgressUpload');
                        console.log(file);
                    },
                    onErrorUpload (file,response,status,header){
                        console.log('onErrorUpload');
                        console.log(file);
                    },
                    onSuccessUpload (file,response,status,header){
                        console.log('onSuccessUpload');
                        console.log(file);
                    },
                    onAbortUpload (file,response,status,header){
                        console.log('onAbortUpload');
                        console.log(file);
                    },
                    onAddFileFail (file,response,status,header){
                        console.log('onAddFileFail');
                        console.log(file);
                    },
                    onAddFileSuccess (file,response,status,header){
                        console.log('onAddFileSuccess');
                        console.log(file);
                    }
                },
                //xhr请求附带参数
                reqopts:{
                    formData:{
                        tokens:'tttttttttttttt'
                    },
                    responseType:'json',
                    withCredentials:false
                }
            }
        },
        created () {

        },
        ready () {

        },
        methods :{
            onStatus(file){
                if(file.isSuccess){
                    return "上传成功";
                }else if(file.isError){
                    return "上传失败";
                }else if(file.isUploading){
                    return "正在上传";
                }else{
                    return "待上传";
                }
            },
            uploadItem(file){
                //单个文件上传
                file.upload();
            },
            uploadAll(){
                //上传所有文件
                this.$broadcast('DO_POST_FILE');
            },
            cancelAll () {
                this.files.forEach(function (val,inx) {
                    val.isCancel = true;
                });
            },
            clearQueue () {
                this.$broadcast('DO_DELETE_FILE');
            },
            removeItem (file){
                this.files.splice(this.files.indexOf(file),1);
            },
            cancelUpload (file) {
                file.isCancel = true;
            }
        },
        components: {
            VueFileUpload
        },
        directives:{

        }
    }

</script>
